<!DOCTYPE html>
<html>
<head>
	<title>nice</title>
	<link rel="stylesheet" type="text/css" href="http://libs.useso.com/js/jplayer/2.6.0/skin/blue.monday/jplayer.blue.monday.css">
	<style type="text/css">
		#content {
			width: 640px;
			margin: 0 auto;
		}
		#url {
			width: 640px;
			height: 32px;
			font-size: 18px;
			line-height: 32px;
			padding: 0px;
			margin: 0px;
			margin-bottom: 15px;
			color: #555;
		    background-color: #fff;
		    background-image: none;
		    border: 1px solid #ccc;
		    border-radius: 4px;
		    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
		    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
		    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
		    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
		    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
		}
	</style>
</head>
<body>
<div id="content">
	<input id="url">
	<div id="jp_container_N" class="jp-video jp-video-360p">
		<div class="jp-type-playlist">
			<div id="jquery_jplayer_N" class="jp-jplayer"></div>
			<div class="jp-gui">
				<div class="jp-video-play">
					<a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
				</div>
				<div class="jp-interface">
					<div class="jp-progress">
						<div class="jp-seek-bar">
							<div class="jp-play-bar"></div>
						</div>
					</div>
					<div class="jp-current-time"></div>
					<div class="jp-duration"></div>
					<div class="jp-controls-holder">
						<ul class="jp-controls">
							<li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
							<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
							<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
							<li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
							<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
							<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
							<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
							<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
						</ul>
						<div class="jp-volume-bar">
							<div class="jp-volume-bar-value"></div>
						</div>
						<ul class="jp-toggles">
							<li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li>
							<li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li>
							<li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
							<li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
							<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
							<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
						</ul>
					</div>
					<div class="jp-details">
						<ul>
							<li><span class="jp-title"></span></li>
						</ul>
					</div>
				</div>
			</div>
			<!-- <div class="jp-playlist">
				<ul>
					
					<li></li>
				</ul>
			</div> -->
			<div class="jp-no-solution">
				<span>Update Required</span>
				To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://libs.useso.com/js/jplayer/2.6.0/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="http://libs.useso.com/js/jplayer/2.6.0/jplayer.playlist.min.js"></script>
<script type="text/javascript" src="base64.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var myPlaylist = new jPlayerPlaylist({
				jPlayer: "#jquery_jplayer_N",
				cssSelectorAncestor: "#jp_container_N"
			}, [], {
				playlistOptions: {
					//enableRemoveControls: true
				},
			swfPath: "",
			solution:"flash, html",
			size: {
				width: "640px", height: "360px", cssClass: "jp-video-360p"
			},
			supplied: "webmv, ogv, m4v, oga, mp3",
			smoothPlayBar: true,
			keyEnabled: true,
			audioFullScreen: true
		});
		$('#url').bind('keypress',function(event){
            if(event.keyCode == "13") {
                var data = {}
                data.u = Base64.encode($(this).val())
                $.ajax({
                	url:"./v.php",
                	type:"POST",
                	dataType:"json",
                	data:data,
                	success:function(json) {
                		myPlaylist.remove()
                		for(var i in json.high) {
                			myPlaylist.add({
								title:json.title,
								artist:"Miaow",
								m4v:json.high[i],
								poster: ""
							});
                		}
                	}
                })
            }
        });
	})
</script>
</body>
</html>